import { getArticleDetailAPI } from "@/apis/detail";
import type { ArticleDetail } from "@/types/detail";
import { NavBar } from "antd-mobile";
import { useEffect, useState } from "react";
import { useSearchParams, useNavigate } from "react-router-dom";

function Detail() {
  // 获取路由参数
  const [searchParams] = useSearchParams();
  // 获取文章列表页传递的文章id
  const id = searchParams.get("article_id");
  // 文章详情
  const [articleDetail, setArticleDetail] = useState<ArticleDetail | null>(
    null
  );
  const navigate = useNavigate();
  // 获取文章详情的方法
  const getArticleDetail = async () => {
    const res = await getArticleDetailAPI(id!);
    setArticleDetail(res.data);
  };

  useEffect(() => {
    getArticleDetail();
  }, [id]);
  return (
    <>
      <NavBar back="返回" onBack={() => navigate(-1)}>
        {articleDetail?.title || "loading..."}
      </NavBar>
      {/* 渲染带有html标签的字符串 */}
      <div
        dangerouslySetInnerHTML={{
          //数据可能还未返回避免undefined报错(先渲染模板 -> 执行useEffect)
          __html: articleDetail?.content || "loading...",
        }}
      ></div>
    </>
  );
}

export default Detail;
